<template>
	<z-paging ref="paging" v-model="contentList" @query="queryList" :show-loading-more-no-more-view="false" show-loading-more-when-reload auto-clean-list-when-reload>
		<template slot="top">
			<cl-navbar :title="$t('message.index.title')" placeholder :autoBack="false" leftIcon=""></cl-navbar>
		</template>
		<!-- 轮播图 -->
		<view class="px-3 position-relative">
			<u-swiper radius="40rpx" :list="swiperlist" class="swiper" height="170">
				<template v-slot:image="{ item, index }">
					<cl-stars-image :srckey="item.image_url" uploadType="news"></cl-stars-image>
				</template>
			</u-swiper>
		</view>
		<!-- 公告 -->
		<view class="notice mt-3">
			<u-notice-bar :text="noticeData" color="#FF6C6C" bgColor="#ededed"></u-notice-bar>
		</view>
		<!-- 吸顶 -->
		<view style="z-index: 100;position: sticky;top :0;background-color:#ededed ;" class="px-3 font28">
			<u-tabs :list="tabList" lineWidth="0" keyName="cate_name" @click="tabsClick" :activeStyle="{
				            color: '#ff2953',
				            fontWeight: '500',
				            transform: 'scale(1.28)'
				        }" :inactiveStyle="{
				            color: '#000',
				            transform: 'scale(1)',
							 fontWeight: '400',
				        }"  lineColor="rgba(255,255,255,0)"
				itemStyle="padding-left: 15px; padding-right: 15px; height: 34px;">
			</u-tabs>
		</view>
		<!-- 咨询内容 -->
		<view class="px-3 pb-3 font28 color0 mt-3">
			<view class="content1 flex">
				<view class="item1" @click="getDetail(item1)" v-for="(item1,index1) in contentList.slice(0,2)"
					:style="{marginRight:index1===0?'10rpx':''}" :key="index1">
					<view class="imageSrc position-relative">
						<!-- <image class="position-absolute image-list" src="/static/message/list.png" mode=""/> -->
						<image class="position-absolute image-video" src="/static/message/video.png" v-if="item1.news_type" @click.stop="videoPlay(item1)">
						</image>
						<view class="number position-absolute colorF font24 flex align-center">
							<image class="image-see mr-1" src="/static/message/see.png" mode=""></image>
							{{item1.view_number}}
						</view>
						<cl-stars-image :srckey="item1.cover_url" :key="item1.cover_url" uploadType="news" class="image"></cl-stars-image>
						<!-- <image src="/static/logo.png" class="image" mode="aspectFill"></image> -->
					</view>

					<view class="title px-1 font28 color0 ellipsis2">
						{{item1.title}}
					</view>
					<view class="name flex px-1 font24 my-2 flex justify-between">
						<text>{{item1.user_info && item1.user_info.nick_name || '-'}}</text>
						<text>{{$u.timeFormat(item1.create_time, 'mm-dd hh:MM')}}</text>
					</view>

				</view>
			</view>
			<view class="content2 mt-2" v-if="contentList.length>2">
				<view class="item2 py-2" @click="getDetail(contentList[2])">
					<view class="title font32 px-1 color0 ellipsis2 font-weight-500">
						{{contentList[2].title}}
					</view>
					<view class="imageSrc position-relative mt-2">
						<image class="position-absolute image-video" src="/static/message/video.png" mode="" v-if="contentList[2].news_type"  @click.stop="videoPlay(contentList[2])">
						</image>
						<!-- <cl-stars-video :srckey="contentList[2].video_url" uploadType="news" :autoplay="false" controls :loop="false"
							videoStyle="width: 100%;height: 100%;border-radius: 20px;"></cl-stars-video> -->
						<view class="number position-absolute colorF font24 flex align-center">
							<image class="image-see mr-1" src="/static/message/see.png" mode=""></image>
							{{contentList[2].view_number}}
						</view>
						<cl-stars-image :srckey="contentList[2].cover_url" :key="contentList[2].cover_url" uploadType="news" class="image" imageStyle="border-radius: 20rpx;width: 100%;height: 100%"></cl-stars-image>
					</view>

					<view class="name flex px-1 font24 my-2 flex justify-between">
						<text>{{contentList[2].user_info && contentList[2].user_info.nick_name || '-'}}</text>
						<text>{{$u.timeFormat(contentList[2].create_time, 'mm-dd hh:MM')}}</text>
					</view>

				</view>
			</view>
			<view class="content3 flex" v-if="contentList.length>3">
				<view class="item3 mt-2" v-for="(item1,index1) in contentList.slice(3)"
					:style="{marginRight:(index1+1)%2===1?'10rpx':''}" :key="index1" @click="getDetail(item1)">
					<view class="imageSrc position-relative">
						<!-- <image class="position-absolute image-list" src="/static/message/list.png" mode="">
						</image> -->
						<image class="position-absolute image-video" src="/static/message/video.png" mode="" v-if="item1.news_type"  @click.stop="videoPlay(item1)"></image>
						<view class="number position-absolute colorF font24 flex align-center">
							<image class="image-see mr-1" src="/static/message/see.png" mode=""></image>
							{{item1.view_number}}
						</view>
						<cl-stars-image :srckey="item1.cover_url" :key="item1.cover_url" uploadType="news" class="image"></cl-stars-image>
					</view>

					<view class="title px-1 font28 color0 ellipsis2">
						{{item1.title}}
					</view>
					<view class="name flex px-1 font24 my-2 flex justify-between">
						<text>{{item1.user_info && item1.user_info.nick_name || '-'}}</text>
						<text>{{$u.timeFormat(item1.create_time, 'mm-dd hh:MM')}}</text>
					</view>

				</view>
			</view>
		</view>
	</z-paging>
</template>

<script>
	export default {
		data() {
			return {
				navBarHeight: uni.getSystemInfoSync().statusBarHeight,
				swiperlist: [],
				noticeData: '',
				tabList: [],
				contentList: [],
				cate_id: 0, //默认为0推荐
			};
		},
		onLoad() {
			this.init()
		},
		methods: {
			init() {
				//轮播
				this.$api.message.newsBanner().then(res => {
					if (res) {
						this.swiperlist = res.data.list
					}
				})
				//通知
				this.$api.message.newsNotice().then(res => {
					if (res) {
						if (res.code == 200) {
							this.noticeData = res.data.map(item => item.content).join('     ');
						} else {
							this.noticeData = ''
						}
					}
				})
				//分类
				this.$api.message.newsCate().then(res => {
					if (res) {
						if (res.code == 200) {
							const lastItem = res.data.pop(); // 移除并获取最后一个元素
							res.data.unshift(lastItem); // 将获取的元素放到数组最前面
							this.tabList = res.data
						} else {
							this.tabList = []
						}
					}
				})
			},
			videoPlay(item){
				if(item.news_type){
					this.$Router.push({
						name: 'video',
						params: {
							video: item.video_url,
							type:'news'
						}
					});
				}
			},
			tabsClick(e) {
				if(this.cate_id == e.id)return
				this.cate_id = e.id;
				this.$refs.paging.reload()
			},
			async queryList(pageNo, pageSize) {
				// console.log(pageNo, pageSize,this.cate_id)
				try {
					let userRes = await this.$api.message.newsList({
						page: pageNo,
						limit: pageSize,
						cate_id: this.cate_id
					})
					if (userRes) {
						if (userRes.code == 200) {
							this.$refs.paging.complete(userRes.data)
						} else{
							this.$refs.paging.complete([])
						}
					} else {
						this.$refs.paging.complete(false)
					}
				} catch (e) {
					this.$refs.paging.complete(false)
				}
			},
			//跳转咨询详情
			getDetail(item) {
				this.$Router.push({
					name: 'messageDetail',
					params: {
						id: item.id
					}
				});
			},
			//获取轮播图
			getNewsBanner() {
				//轮播
				this.$api.message.newsBanner().then(res => {
					if (res) {
						this.swiperlist = res.data.list
					}
				})
			}
		}
	}
</script>

<style lang="scss" scoped>
	.message {
		background-color: #ededed;
		min-height: 100vh;
	}

	.bg {
		z-index: 0;
		background-color: #ededed
	}

	.content1 {

		.item1 {
			width: calc(50% - 5rpx);
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;

			.imageSrc {
				width: 100%;
				aspect-ratio: 1.54;
				
				.image-video {
					width: 60rpx;
					height: 60rpx;
					left: calc(50% - 30rpx);
					top: calc(50% - 30rpx);
					z-index: 2;
				}
				.image-list {
					width: 50rpx;
					height: 50rpx;
					right: 10rpx;
					top: 10rpx;
					z-index: 2;
				}

				.number {
					right: 10rpx;
					bottom: 10rpx;
					z-index: 2;

				}

				.image-see {
					width: 34rpx;
					height: 34rpx;
				}

				.image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx 20rpx 0px 0px;
				}

			}

			.title {
				margin-top: 6rpx;
				line-height: 1.4em; /* 设置每行文字的高度 */
				height: 2.8em; /* 高度设置为两倍的 line-height */
			}

			.name {
				color: rgba(0, 0, 0, 0.3);
			}
		}
	}

	.content2 {

		.item2 {
			width: 100%;
			background-color: #fff;
			border-radius: 20rpx;

			.imageSrc {
				width: 100%;
				aspect-ratio: 1.81;
				
				.image-video {
					width: 88rpx;
					height: 88rpx;
					left: calc(50% - 44rpx);
					top: calc(50% - 44rpx);
					z-index: 2;
				}

				.number {
					right: 10rpx;
					bottom: 10rpx;
					z-index: 2;

				}

				.image-see {
					width: 34rpx;
					height: 34rpx;
				}

				.image {
					width: 100%;
					height: 100%;
					border-radius: 20rpx;
				}

			}

			.title {
				margin-top: 6rpx;
			}

			.name {
				color: rgba(0, 0, 0, 0.3);
			}
		}
	}

	.content3 {
		flex-wrap: wrap;

		.item3 {
			width: calc(50% - 6rpx);
			background-color: #fff;
			border-radius: 20rpx;
			overflow: hidden;
			.imageSrc {
				width: 100%;
				aspect-ratio: 1.54;
				
				.image-video {
					width: 60rpx;
					height: 60rpx;
					left: calc(50% - 30rpx);
					top: calc(50% - 30rpx);
					z-index: 2;
				}
				
				.image-list {
					width: 50rpx;
					height: 50rpx;
					right: 10rpx;
					top: 10rpx;
					z-index: 2;
				}

				.number {
					right: 10rpx;
					bottom: 10rpx;
					z-index: 2;

				}

				.image-see {
					width: 34rpx;
					height: 34rpx;
				}

			}

			.title {
				margin-top: 6rpx;
				line-height: 1.4em; /* 设置每行文字的高度 */
				height: 2.8em; /* 高度设置为两倍的 line-height */
			}

			.name {
				color: rgba(0, 0, 0, 0.3);
			}
		}
	}
</style>